<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				overflow: hidden;
			}
			#box{
				width:286px;
				height:700px;
				float: right;
				position: relative;
				left:280px
			}
			#box-left{
				width:6px;
				height:700px;
				float:left;
				background:#7a6e6e;
			}
			#box-right{
				width:280px;
				height:700px;
				float:left;
				background:#cecece
			}
			#member{
				background:url(img/1.jpg) no-repeat left #7A6E6E;
				top:320px;
				width:41px;
				height:35px;
				position: absolute;
				left:-35px;
				z-index: 20;
			}
			#shopping{
				background:url(img/2.jpg) no-repeat left #7A6E6E;
				top:360px;
				width:41px;
				height:35px;
				position: absolute;
				left:-35px;
				z-index: 20;
			}
			#love{
				background:url(img/3.jpg) no-repeat left #7A6E6E;
				top:400px;
				width:41px;
				height:35px;
				position: absolute;
				left:-35px;
				z-index: 20;
			}
			#footprint{
				background:url(img/4.jpg) no-repeat left #7A6E6E;
				top:440px;
				width:41px;
				height:35px;
				position: absolute;
				left:-35px;
				z-index: 20;
			}
			#message{
				background:url(img/5.jpg) no-repeat left #7A6E6E;
				top:480px;
				width:41px;
				height:35px;
				position: absolute;
				left:-35px;
				z-index: 20;
			}
			#jimi{
				background:url(img/6.jpg) no-repeat left #7A6E6E;
				top:520px;
				width:41px;
				height:35px;
				position: absolute;
				left:-35px;
				z-index: 20;
			}
			#memberTxt,#shoppingTxt,#loveTxt,#footprintTxt,#messageTxt,#jimiTxt{
				border-radius: 2px;
				z-index: -1;
				position: absolute;
				width:89px;
				height:35px;
				font-size: 12px;
				line-height: 35px;
				padding-left: 12px;
				background:#c81623;
				color:#fff;
			}
			#memberTxt{
				top:320px;
				left:6px;
			}
			#shoppingTxt{
				top:360px;
				left:6px;
			}
			#loveTxt{
				top:400px;
				left:6px;
			}
			#footprintTxt{
				top:440px;
				left:6px;
			}
			#messageTxt{
				top:480px;
				left:6px;
			}
			#jimiTxt{
				top:520px;
				left:6px;
			}
		</style>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				$("body").css({
					width:$(window).width()
				});
				$("#left>div").hover(
					function(){
						var i=$(this).index();
						var j=(i+1)*10+(i+1);
						$(this).css("background",'url(img/'+j+'.jpg)');
						$("#right>div").eq(i).stop(true).animate({
							left:"-100px"
						},500)
					},
					function(){
						var i=$(this).index();
						$(this).css("background",'url(img/'+(i+1)+'.jpg)');
						$("#right>div").eq(i).stop(true).animate({
							left:"6px"
						},500)
					}
				);
				$("#right>div").hover(
					function(){
						var i=$(this).index();
						var j=(i+1)*10+(i+1);
						$("#left>div").eq(i).css("background",'url(img/'+j+'.jpg)');
						$(this).css("display","block");
						$(this).stop(true).animate({
							left:"-100px"
						},500)
					},
					function(){
						var i=$(this).index();
						$("#left>div").eq(i).css("background",'url(img/'+(i+1)+'.jpg)');
						$(this).stop(true).animate({
							left:"6px"
						},500)
					}
				)
				var btn=true;
				$("#left>div").click(
					function(){
						var i=$(this).index();
						var j=(i+1)*10+(i+1);
						if(btn){
							$("#box").animate({
								left:"0px"
							},500);
							$("#right>div").eq(i).css("display","none");
							btn=false;
						}else{
							$("#box").animate({
								left:"280px"
							},500,function(){
								$("#right>div").eq(i).stop().css("display","block");
							});
							btn=true;
						}
					}
				)
			})
		</script>
	</head>
	<body>
		<div id="box">
			<div id="left">
				<div id="member"></div>
				<div id="shopping"></div>
				<div id="love"></div>
				<div id="footprint"></div>
				<div id="message"></div>
				<div id="jimi"></div>
			</div>
			<div id="right">
				<div id="memberTxt">京东会员</div>
				<div id="shoppingTxt">购物车</div>
				<div id="loveTxt">我的收藏</div>
				<div id="footprintTxt">我的足迹</div>
				<div id="messageTxt">我的信息</div>
				<div id="jimiTxt">咨询JIMI</div>
			</div>
			<div id="box-left">
				
		    </div>
			<div id="box-right">
				<div id="memberDiv">
					
				</div>
			</div>
		</div>
	</body>
</html>
